<template>
  <div class="ts-filed">
    <label class="tf-label" :style="{width:labelWidth}">{{label}}<span class="ico" v-if="required">*</span></label>

    <input v-if="type!=='textarea'" @click="$emit('click')" @input="handleInput" :readonly="readonly"
           :value="currentValue"
           class="tf-input"
           @focus="toFocus"
           :type="type"
           :placeholder="tips"/>

    <textarea :value="currentValue"
              rows="6"
              @focus="toFocus"
              @input="handleInput"
              class="tf-input tf-textarea"
              v-if="type==='textarea'"
              placeholder="请填写">

    </textarea>

    <div v-if="readonly" class="tf-svg">
      <svg class="tf-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12"
           height="24" viewBox="0 0 12 24">
        <image width="12" height="24"
               xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAYCAQAAABkO9ThAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCBMOETllUlclAAABFklEQVQoz2XSIUhDURTG8f/2Vh4IikWYKGIQDBPBIA6DC4KyMJllQUQRDjoQTaYtrgkWGewUg4pJ0T0RGbohsoFhScFgtmiz6NIMk+fevSeeH3zcy3dCpTce2ZA2xoT5YJ1DsCHJC1ktmOB4P81z0qSa31P1bgi1AR2mwSCbUjIAdIw6/azImQGgkzzgsiyeAaBx7oCk1Dqv8kcaLBHhUqcNAKmQoYdrjQWi/gLXOOKdOQtAdzngNYw9I4BrgebZ4ZN5I0q3KPLFrDwHQDOc0iIhT8EPLlAGFuUeIOKvZ7jAId1Z+6AxbnBZlav/ogAd5ZY+tuW4u0F0gApRchIo2In2UmWcfcmbnXtMoOzZxzDECVn7fH4BGYRQIvE86RAAAAAASUVORK5CYII="></image>
      </svg>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tsFiled',
    props: {
      type: {
        type: String,
        default: 'text'
      },
      label: String,
      tips: {type: String, default: '请填写'},
      readonly: Boolean,
      required: {type: Boolean, default: false},
      labelWidth: {type: String, default: '2.60rem'},
      single: Boolean,
      value: {}
    },
    data() {
      return {
        currentValue: this.value
      }
    },
    methods: {
      handleInput(evt) {
        this.currentValue = evt.target.value;
      },
      toFocus() {
        document.getElementsByClassName('router')[0].style.height = document.body.clientHeight + 'px';
      }
    },
    watch: {
      value(val) {
        this.currentValue = val;
      },
      currentValue(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";

  @mixin placeholderStyle() {
    position: relative;
    top: .04rem;
    @include sc(.30rem, #909090);
  }

  textarea:-ms-input-placeholder {
    @include sc(.30rem, #909090);
  }

  textarea::-webkit-input-placeholder {
    @include sc(.30rem, #909090);
  }

  :-moz-placeholder {
    @include placeholderStyle;
  }

  ::-moz-placeholder {
    @include placeholderStyle;
  }

  input:-ms-input-placeholder {
    @include placeholderStyle;
  }

  input::-webkit-input-placeholder {
    @include placeholderStyle;
  }

  .ts-filed {
    background-color: #ffffff;
    padding: .25rem .24rem;
    font-size: .30rem;
    display: flex;
    position: relative;
    @include borderScale('bottom');
    .tf-label {
      color: #2e2e2e;
      width: 2.60rem;
      display: inline-block;
      flex: none;
      .ico {
        color: #E5343A;
        position: relative;
        top: 1px;
        left: 1px;
      }
    }
    .tf-input {
      flex: 1;
      color: #020202;
      border: none;
      font-size: .30rem;
      &.tf-textarea {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        resize: none;
      }
    }
    .tf-svg {
      display: flex;
      align-items: center;
      .tf-icon {
        flex: 1;
        height: .24rem;
      }
    }
  }
</style>
